const path = require('path')
const pxToViewport = require('postcss-px-to-viewport')
const TerserPlugin = require('terser-webpack-plugin')
// const CompressionPlugin = require("compression-webpack-plugin");
const CracoLessPlugin = require('craco-less')
const { addAfterLoader, loaderByName } = require('@craco/craco')
const vw = pxToViewport({
  // 视口宽度，一般就是 375（ 设计稿一般采用二倍稿，宽度为 375 ）
  viewportWidth: 375,
  unitPrecision: 4,
  selectorBlackList: ['.ignore'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
  minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
  mediaQuery: false // 允许在媒体查询中转换`px`
})

module.exports = {
  // 此处省略 webpack 配置
  webpack: {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true // 去除 console.log
            }
          }
        })
      ]
      // splitChunks: {
      //   chunks: "all",
      //   minSize: 20000,
      //   maxSize: 70000,
      //   minChunks: 1,
      //   maxAsyncRequests: 30,
      //   maxInitialRequests: 30,
      //   automaticNameDelimiter: "~",
      //   enforceSizeThreshold: 50000,
      //   cacheGroups: {
      //     vendors: {
      //       test: /[\\/]node_modules[\\/]/,
      //       priority: -10,
      //       reuseExistingChunk: true,
      //     },
      //     default: {
      //       minChunks: 2,
      //       priority: -20,
      //       reuseExistingChunk: true,
      //     },
      //   },
      // },
    },
    // plugins: [
    //   new CompressionPlugin({
    //     test: /\.js$|\.css$/,
    //     threshold: 10240, // 10k 以上文件再压缩
    //   }),
    // ],
    configure: (webpackConfig, { env, paths }) => {
      console.log('webpack config', process.env.REACT_APP_ENV)
      // const publicPath = {
      //   'test': "https://test.aimengtec.com",
      //   'dev': "https://test.aimengtec.com",
      //   'prd':  "https://release.aimengtec.com",
      //   'release':  "https://www.aimengtec.com",
      // }

      // const styleResourcesLoader = {
      //   loader: 'style-resources-loader',
      //   options: {
      //     patterns: path.resolve(__dirname, './src/styles/index.less'),
      //     injector: 'append'
      //   }
      // }
      // addAfterLoader(
      //   webpackConfig,
      //   loaderByName('less-loader'),
      //   styleResourcesLoader
      // );
      //process.env.REACT_APP_ENV === "dev" ? "/" : `//47.236.101.167:8883/${process.env.REACT_APP_ENV}/`
      // webpackConfig.output.publicPath = "//119.29.249.226:2221/";
      webpackConfig.output.publicPath = '/'
      return webpackConfig
    }
    // module: {
    //   rules: [
    //     {
    //       test: /\.(png|jpe?g|gif)$/i,
    //       type: "asset",
    //       parser: {
    //         dataUrlCondition: {
    //           maxSize: 5 * 1024, // 将文件大小限制为 100kb 以内，超过 100kb 的文件将被编译成普通的图片文件。
    //         },
    //       },
    //     },
    //   ],
    // },
    // module: {
    //   rules: [{
    //     test: /\.less$/,
    //     use: ['style-loader', 'css-loader', 'less-loader', {
    //       loader: 'style-resources-loader',
    //       options: {
    //         patterns: path.resolve(__dirname, 'src/style/variables.less'),
    //         injector: 'append'
    //       }
    //     }]
    //   }]
    // },
  },
  // 这里补充style配置
  style: {
    postcss: {
      mode: 'extends',
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins: [vw]
        }
      }
    }
    // css: {
    //   loaderOptions: {
    //     // 这里可以设置全局Less变量文件的路径
    //     less: {
    //       additionalData: `@import "${path.resolve(__dirname, 'src/style/variables.less')}";`,
    //     },
    //   },
    // }
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            // modifyVars: {
            //   '@main-text-color': 'blue', // 全局主色
            // },
            javascriptEnabled: true
            // 使用@import语句引入其他Less文件
          }
          // additionalData:  `@import "src/style/variables.less";`,
        }
      }
    }
  ],
  devServer: {
    proxy: {
      port: '2221',
      '/api': {
        target: 'http://119.29.249.226:2221',
        changeOrigin: false
      }
    }
  }
}
